<script setup lang="ts">
import homeApi from '@/service/api/home'
import detailApi from '@/service/api/detail'
import { useAppsStore } from '@/stores/modules/app'
interface BannerItem {
  id: number
  image: string
  webUrl: string
  productId: string
  type: 'URL' | 'SHOPPING'
}
const list = ref<BannerItem[]>([])
const init = async () => {
  const { data } = await homeApi.banner()
  list.value = data
}
init()

const { width } = useWindowSize()
const useStore = useAppsStore()
const { setLoginShow } = useStore
const { getUserInfo: userInfo } = storeToRefs(useStore)
const SwiperHeight = computed(() => {
  const bili = width.value / 1920
  return Number((770 * bili).toFixed(2)) + 'px'
})
const router = useRouter()
const handClick = async (e: BannerItem) => {
  if (e.type === 'URL') {
    window.open(e.webUrl)
  } else if (e.type === 'SHOPPING') {
    if (!userInfo.value?.id) {
      setLoginShow(true)
      return
    }
    const { data } = await detailApi.detail(e.productId)
    router.push({
      path: data.book_type === 1 ? '/mhdetail' : '/detail',
      query: {
        id: e.productId
      }
    })
  }
}
</script>

<template>
  <div
    class="diy-swiper"
    :style="{ height: `${SwiperHeight}` }"
    v-if="list.length > 0"
  >
    <n-carousel show-arrow :show-dots="false" draggable>
      <img
        v-for="item in list"
        :key="item.id"
        class="carousel-img"
        :style="{ height: `${SwiperHeight}` }"
        :src="item.image"
        alt="图1"
        @click.stop="handClick(item)"
      />
    </n-carousel>
  </div>
</template>

<style scoped lang="scss">
.carousel-img {
  width: 100%;
  //height: 500px;
  object-fit: cover;
}
</style>
